<script setup lang="ts" name="KnowledgeBase">
import usePublic from './hooks/usePublic'
import useInit from './hooks/useInit'

const boxRef = ref(null)
const width = ref(300)
const height = ref(200)

const box = ref({
  width: 0,
  height: 0,
  left: {
    width: 300
  },
  right: {
    width: 0,
    top: {
      height: 200
    },
    bottom: {
      height: 0
    }
  }
})
// 公共属性及方法
const { initInfo } = usePublic()

const { initPage, getListData, handleSizeChange, handleCurrentChange, resetSearch } = useInit(initInfo)

const movingX = (v) => {
  width.value -= v
}

const movingY = (v) => {
  height.value += v
}

const movingTop = (v) => {
  console.log(v)
  box.value.right.top.height -= v
  if (box.value.right.top.height >= box.value.height) {
    box.value.right.top.height = box.value.height
    box.value.right.bottom.height = 0
  } else if (box.value.right.top.height <= 0) {
    box.value.right.top.height = 0
    box.value.right.bottom.height = box.value.height
  } else {
    box.value.right.bottom.height = box.value.height - box.value.right.top.height
  }
}
const movingRight = (v) => {
  console.log(v)
  box.value.left.width -= v
  if (box.value.left.width >= box.value.width) {
    box.value.left.width = box.value.width
    box.value.right.width = 0
  } else if (box.value.left.width <= 0) {
    box.value.left.width = 0
    box.value.right.width = box.value.width
  } else {
    box.value.right.width = box.value.width - box.value.left.width
  }
}
const movingBottom = (v) => {
  console.log(v)
  box.value.right.bottom.height += v
  if (box.value.right.bottom.height >= box.value.height) {
    box.value.right.bottom.height = box.value.height
    box.value.right.top.height = 0
  } else if (box.value.right.bottom.height <= 0) {
    box.value.right.bottom.height = 0
    box.value.right.top.height = box.value.height
  } else {
    box.value.right.top.height = box.value.height - box.value.right.bottom.height
  }
}
const movingLeft = (v) => {
  console.log(v)
  box.value.right.width += v
  if (box.value.right.width >= box.value.width) {
    box.value.right.width = box.value.width
    box.value.left.width = 0
  } else if (box.value.right.width <= 0) {
    box.value.right.width = 0
    box.value.left.width = box.value.width
  } else {
    box.value.left.width = box.value.width - box.value.right.width
  }
}

const setBoxRef = (e) => {
  boxRef.value = e
}

onMounted(() => {
  initPage()
  console.log(boxRef.value.getBoundingClientRect(), '实例')
  const boxDom = boxRef.value.getBoundingClientRect()
  box.value.width = boxDom.width
  box.value.height = boxDom.height
  box.value.right.width = box.value.width - box.value.left.width
  box.value.right.bottom.height = box.value.height - box.value.right.top.height
})
</script>

<template>
  <page-wrap direction="column">
    <div class="box" :ref="setBoxRef">
      <div class="box-content" :style="{ width: box.width + 'px', height: box.height + 'px' }">
        <div class="side-left" :style="{ width: box.left.width + 'px' }">
          <!--左侧div内容-->
          <Moving position="right" @change="movingRight"></Moving>
        </div>
        <!-- <div class="resize" title="左右侧边栏">⋮</div> -->
        <!-- <MovingX @change="movingX">
          <div class="move-handle">⋮</div>
        </MovingX> -->
        <div class="mid" :style="{ width: box.right.width + 'px' }">
          <!--右侧div内容-->
          <Moving position="left" @change="movingLeft"></Moving>

          <div class="topBox" :style="{ height: box.right.top.height + 'px' }">
            <!--右上div内容-->
            <Moving position="bottom" @change="movingBottom"></Moving>
          </div>
          <!-- <div title="上下侧边栏" class="move">⋯</div> -->
          <!-- <MovingY @change="movingY">
            <div class="move-handle">⋯</div>
          </MovingY> -->
          <div class="downBox" :style="{ height: box.right.bottom.height + 'px' }">
            <!--右下div内容-->
            <Moving position="top" @change="movingTop"></Moving>
          </div>
        </div>
      </div>
    </div>
  </page-wrap>
</template>
<!-- <div class="user-page"><page-development></page-development>
    <el-container>
      <el-aside width="240px" class="flex">
        <el-card shadow="hover" class="flex flex-1 flex-col">
          <template #header>
            <div class="card-header">
              <el-input v-model="initInfo.search.name" placeholder="分类名称">
                <template #append>
                  <el-button icon="Search" />
                </template>
              </el-input>
            </div>
          </template>
          <el-scrollbar>
            <el-tree :data="initInfo.knowledgeTypeList" @node-click="handleNodeClick" node-key="value" auto-expand-parent :highlight-current="true" :default-expanded-keys="expandNodes" />
          </el-scrollbar>
        </el-card>
      </el-aside>
      <el-container>
        <el-card shadow="hover" class="flex flex-1">
          <el-form :inline="true" @submit.prevent>
            <el-form-item label="标题">
              <el-input v-model="initInfo.search.title" placeholder="请输入标题" @keyup.enter="getListData" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="getListData">{{ $t('buttons.buttonSearch') }}</el-button>
              <el-button icon="Refresh" @click="resetSearch">{{ $t('buttons.buttonReset') }}</el-button>
            </el-form-item>
          </el-form>
          <div class="flex-1 table-layout">
            <div class="table-wrap">
              <el-table :data="initInfo.list.data" border>
                <el-table-column type="index" :label="$t('page.序号')" width="60" />
                <el-table-column prop="account" label="标题" min-width="120" />
                <el-table-column prop="userName" label="标签" min-width="120" />
                <el-table-column prop="department" label="更新时间" min-width="120" />
                <el-table-column prop="operate" :label="$t('page.操作')" width="240" align="center" fixed="right">
                  <template #default="scope">
                    <el-button type="primary" icon="Eye" @click="edit(scope.row)"></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <el-pagination
            v-if="initInfo.list.total > 0"
            v-model:currentPage="initInfo.search.page"
            v-model:page-size="initInfo.search.limit"
            :page-sizes="[20, 40, 80, 120]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="initInfo.list.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </el-card>
      </el-container>
    </el-container>
  </div> -->

<style scoped lang="scss">
.user-page {

  >.el-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: var(--el-space);

    >.el-aside {
      margin-right: var(--el-space);
      overflow: inherit;

      .el-card {
        :deep(.el-card__header) {
          padding: calc(var(--el-space) - 5px);
        }

        :deep(.el-card__body) {
          position: relative;
          display: flex;
          flex: 1;
          padding: 0;

          .el-scrollbar {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            .el-scrollbar__wrap {
              padding: calc(var(--el-space) / 2);
            }
          }
        }
      }
    }

    .el-container {
      .el-card {
        :deep(.el-card__body) {
          display: flex;
          flex: 1;
          flex-direction: column;
        }
      }
    }
  }
}

.table-layout {
  position: relative;
  margin: var(--el-space) 0 0;

  .table-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .el-table {
      width: 100%;
      height: 100%;

      .el-tag {
        margin: 2px;
      }
    }
  }
}

.el-pagination {
  align-items: center;
  justify-content: flex-end;
  margin: var(--el-space) 0 0;
}

.box {
  display: flex;
  flex: 1;
  overflow: hidden;

  .box-content{
    position: relative;
    display: flex;
  }

  /* 左侧div样式 */
  .side-left {
    position: relative;
    background: #71ad88;
  }
}

/* 右侧div'样式 */
.mid {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  background: #f3f3f3;

  /* 上方div'样式 */
  .topBox {
    position: relative;
    display: flex;
    background-color: #3ff53f;
  }

  /* 下方div'样式 */
  .downBox {
    position: relative;
    display: flex;
    background-color: #f0fd35;
  }
}
</style>
